<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>
    <style>
        h3{
            color: red;
        }
        /*id选择器：#id属性：指定id选择器*/
        #p1{
            color: blue;
        }
        /*类选择器：.class属性：指定类选择器*/
        .c1{
            color: green;
        }
        /*分组选择器：多个选择器，用逗号隔开*/
        input, #p1,.c1{
            background-color: deepskyblue;
        }
        /*优先级：样式的优先级：id>类>标签*/
        /*通配符选择器：*/
        *{
            border: 1px solid red;
        }
        /*伪类选择器*/
        /*访问过：*/
        a:visited{
            color: grey;
        }
        /*未访问*/
        a:link{
            color: orange;
        }
        /*悬停*/
        a:hover{
            color: pink;
        }
        /*点击*/
        a:active{
            color: green;
        }
    </style>
</head>
<body>

<a href="my.css">超链接1</a>
<a href="01CSS样式.html">超链接2</a>
<a href="02CSS选择器.html">超链接3</a>
<a href="https://www.baidu.com">超链接4</a>

<form>
    <input type="text" class="c1">
    <input type="password">
    <input type="button" value="登录">
</form>
<p id="p1">曹操</p>
<p class="c1">刘备</p>
<p class="c1">孙权</p>
<p>关羽</p>
<p>张飞</p>
<p>赵云</p>
<h1>西游记</h1>
<h2>水浒传</h2>
<h3>红楼梦</h3>
<h3>红楼梦</h3>
</body>
</html>